<template>
  <page-frame>
    <div class="outBedInsduction">
      <div class="toptitle">
        <div class="left">床位监护</div>
        <div class="right">
          <div class="btns">
            <div class="alartRecord" @click="alarmRecord">
              <img src="../../img/record.png" >
              <span>报警记录</span>
            </div>
            <div class="alartRecord" @click="alarmSettings">
              <img src="../../img/setUp.png" >
              <span>报警设置</span>
            </div>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="outBedContent">
        <el-row style="margin-bottom:15px;">
            <el-col style="width:130px">
              <div class="input-item">
                <el-select style="width:90%!important;"  v-model="serviceId" @change="selectItem" @clear = "clearItem" clearable placeholder="请选择">
                  <el-option
                    v-for="item in serviceList"
                    :label="item.serviceName"
                    :value="item.serviceId">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="input-item" v-show="serviceId==1">
                <el-cascader
                  expand-trigger="hover"
                  :options="bedList"
                  v-model="filterData.fiId"
                  @change="handleChange">
                </el-cascader>
              </div>
              <div class="input-item" v-show="serviceId==2">
                <el-input
                  v-model="filterData.memberName"
                  style="width:81%!important"
                  placeholder="请填写会员姓名"
                  @keyup.enter.native="query">
                </el-input>
              </div>
              <div class="input-item" v-show="serviceId==3">
                <el-input
                  v-model="filterData.emName"
                  style="width:81%!important"
                  placeholder="请填写员工姓名"
                  @keyup.enter.native="query">
                </el-input>
              </div>
            </el-col>
            <el-col :span="10">
              <el-button class="query lightGreenBtn" style="margin-right:15px;" @click="query">搜索</el-button>
              <el-button class="" style="margin-right:15px;" @click="filterData.deviceBedStatus=null,query()">全部</el-button>
              <el-badge :value="inBedAlarm" style="margin-right:15px;">
                <el-button @click="filterData.deviceBedStatus=3,query()">在床报警</el-button>
              </el-badge>
              <el-badge :value="outBedAlarm" style="margin-right: 15px;">
                <el-button @click="filterData.deviceBedStatus=4,query()">离床报警</el-button>
              </el-badge>
              <el-badge :value="outBed">
                <el-button @click="filterData.deviceBedStatus=2,query()">离床</el-button>
              </el-badge>
            </el-col>
          </el-row>
        <el-row v-show='bedDetailList.length!=0'>
          <div v-for="item in bedDetailList" style="margin-bottom:15px;width:20%;float:left;">
            <div class="box-card" @click="viewDetail(item)" :class="{'border-warn':(item.deviceBedStatusDesc=='在床报警'||item.deviceBedStatusDesc=='离床报警'),'border-OutBed':(item.deviceBedStatusDesc=='离床'),'border-Unavailable':(item.deviceBedStatusDesc=='不可用')}">
              <div class="head clearfix" :class="{'cardWarn':(item.deviceBedStatusDesc=='在床报警'||item.deviceBedStatusDesc=='离床报警'),'cardOutBed':(item.deviceBedStatusDesc=='离床'),'cardInBed':(item.deviceBedStatusDesc=='在床'),'cardUnavailable':(item.deviceBedStatusDesc=='不可用')}">
                <span style="float: left;line-height: 36px;">{{item.buildingName}}{{item.floorName}}{{item.bedNo}}</span>
                <span style="float: right;line-height:36px;">{{item.deviceBedStatusDesc}}</span>
              </div>
              <div class="text item card-body">
                <!--<p>床位号：{{item.bedNo}}</p>-->
                <p>会员姓名：{{item.memberName}}</p>
                <p>负责员工：{{item.personNames}}</p>
                <p style="font-size:12px;">离床报警：{{item.leavingIsOpen | filterLeaveAlarm}}</p>
                <p style="font-size:12px;">在床报警：{{item.lyingIsOpen | filterLeaveAlarm}}</p>
                <p style="text-align: right">
                  <span class="icon-power" style="cursor:pointer;font-weight:bold" @click.stop="power(item.deviceId)"></span>
                </p>
              </div>
            </div>
          </div>
        </el-row>
        <el-row v-show='bedDetailList.length==0'>
          <div style="width:353px;margin:100px auto 0px;"><img src="../../img/placeholder.png" alt=""></div>
          <div style="text-align: center;font-size:20px;margin-top:10px;">当前页面暂无数据</div>
        </el-row>
      </div>

      <!--报警设置弹框-->
      <el-dialog title="报警设置" v-model="alarm" size="tiny" :close-on-click-modal="false">
        <div class="input-item">
          <label style="float:left;margin-right:5px;">离床时长</label>
          <el-col :span="16">
            <el-input v-model="alarmSets.leavingTime"></el-input>
          </el-col>
          <el-col :span="4" style="margin-left:5px;">
            <el-select v-model="alarmSets.leavingTimeType">
              <el-option :value="1" label="小时"></el-option>
              <el-option :value="2" label="分钟"></el-option>
            </el-select>
          </el-col>
        </div>
        <div class="input-item">
          <label style="float:left;margin-right:5px;">在床时长</label>
          <el-col :span="16">
            <el-input v-model="alarmSets.lyingTime"></el-input>
          </el-col>
          <el-col :span="4" style="margin-left:5px;">
            <el-select v-model="alarmSets.lyingTimeType">
              <el-option :value="1" label="小时"></el-option>
              <el-option :value="2" label="分钟"></el-option>
            </el-select>
          </el-col>
        </div>
        <div class="input-item">
          <el-col :span="2" style="text-align:right">注：</el-col>
          <el-col :span="20">
            将离床时长、在床时长设置为0时/0分不报警
          </el-col>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="alarm = false">取 消</el-button>
          <el-button class="lightGreenBtn" @click="alarmSet">确 定</el-button>
        </span>
      </el-dialog>

      <!--开启/关闭报警-->
      <el-dialog title="开启/关闭报警" class="openAlarm" v-model="openAlarm" size="tiny" :close-on-click-modal="false">
        <el-form :model="openAlarmForm" label-width="80px">
          <el-form-item label="离床报警">
            <el-radio-group v-model="openAlarmForm.leavingIsOpen">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="在床报警">
            <el-radio-group v-model="openAlarmForm.lyingIsOpen">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="openAlarm = false">取 消</el-button>
          <el-button class="lightGreenBtn" @click="submitOpenAlarm">确 定</el-button>
        </span>
      </el-dialog>

      <div class="pagination" v-show='bedDetailList.length!=0'>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChangePage"
            :current-page="currentPage"
            :page-size="20"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
  import bedGuardApi from '../../service/healthManagement/bedGuardApi';
  import commonJs from '../../config/common.js';
  export default {
    data () {
      return {
        currentDeviceId:null,
        serviceId:1,
        serviceList:[{
          serviceId: 1,
          serviceName: "楼层",
        },{
          serviceId: 2,
          serviceName: "会员姓名",
        },{
          serviceId: 3,
          serviceName: "员工姓名",
        }],
        titleClass:'',
        inBedAlarm:0,
        outBedAlarm:0,
        outBed:0,
        filterData:{
          "flId": null,
          "memberName": "",
          "emName": "",
          "deviceBedStatus": null//"在床报警",3;"离床报警",4;"离床",2;
        },
        bedDetailList:[],
        bedList: [],
        alarm:false,
        openAlarm:false,
        alarmSets:{
          leavingTime: '',
          leavingTimeType: 2,
          lyingTime: '',
          lyingTimeType: 2
        },
        warnCounts:[],
        openAlarmForm:{
          leavingIsOpen:1,
          lyingIsOpen:1
        },
        total:0,
        currentPage:1,
      }
    },
    methods: {
      init() {
        this.getFloorStr();
        this.getBedList(1);
        this.getWarnCount();
      },
      power(deviceId){
        this.openAlarm = true;
        this.currentDeviceId = deviceId;
        let self = this;
        bedGuardApi.getDeviceEnableOrDisable(self.currentDeviceId).then(
          (res)=>{
            self.openAlarmForm = res.data.data;
          }
        );
      },
      submitOpenAlarm(){
        let self = this;
        self.openAlarm = false;
        bedGuardApi.enableOrDisableDeviceBed(self.currentDeviceId,self.openAlarmForm.lyingIsOpen,self.openAlarmForm.leavingIsOpen).then(
          (res)=>{
            self.$message({
              message:'状态修改成功',
              type:'success'
            });
            self.getBedList(1);
          }
        );
      },
      getFloorStr(){
        let self = this;
        bedGuardApi.getFloorStruct().then(
          (response)=>{
            self.bedList = response.data.data;
            commonJs.changeBedList(self.bedList);
          }
        );
      },
      query(){
        this.getBedList(1);
      },
      getBedList(pageNum){
        let self = this;
        bedGuardApi.getDeviceList(20,pageNum,self.filterData).then(
          (response)=>{
            self.bedDetailList = response.data.data.list;
            self.total = response.data.data.total;
          }
        );
      },
      getWarnCount(){
        let self = this;
        bedGuardApi.getWarnCounts().then(
          (response)=>{
            self.warnCounts = response.data.data;
            for(var value of self.warnCounts){
              if(value.desc=='在床报警'){
                self.inBedAlarm = value.counts;
                continue;
              }else if(value.desc=='离床报警'){
                self.outBedAlarm = value.counts;
                continue;
              }else if(value.desc=='离床'){
                self.outBed = value.counts;
                continue;
              }
            }
          }
        );
      },
      alarmRecord(){
        this.$router.push({name:'alarmRecord'});
      },
      alarmSettings(){
        this.alarm = true;
        this.getAlarmSetInfo();
      },
      getAlarmSetInfo(){
        let self = this;
        bedGuardApi.getAlarmSetUp().then(
          (response)=>{
            self.alarmSets.leavingTime = response.data.data.leavingTime;
            self.alarmSets.lyingTime = response.data.data.lyingTime;
            self.alarmSets.leavingTimeType = 2;
            self.alarmSets.lyingTimeType = 2;
          }
        );
      },
      alarmSet(){
        let self = this;
        bedGuardApi.saveAlarmSetUp(self.alarmSets).then(
          (response)=>{
            self.alarm = false;
            self.$message({
              message:'保存成功',
              type:'success'
            });
          }
        );
      },
      selectItem(){
        //清空选项
        this.filterData.flId = null;
        this.filterData.memberName = '';
        this.filterData.emName = '';
        this.filterData.deviceBedStatus = null;
      },
      clearItem(){
        this.selectItem();
      },
      handleChange(value) {
        this.filterData.flId = value[1];
        this.query();
      },
      viewDetail(item){
        this.$router.push({name:'bedDetailInfo',params:{deviceId:item.deviceId}});
      },

      handleSizeChange(val) {
//        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
//        console.log(`当前页: ${val}`);
        this.getBedList(this.currentPage);
      },
    },
    filters: {
      filterLeaveAlarm: function (value) {
        if(value==1){
          return '开启';
        }else if(value==0){
          return '关闭';
        }
      }
    },
    mounted: function () {
      this.init();
    },
  }
</script>
<style>
  @media screen and (max-width:1366px){
    .outBedInsduction .el-cascader .el-input{
       width:81%!important;
     }
    .outBedInsduction .box-card .card-body{
      padding: 20px;
      height:182px;
    }
  }

  @media screen and (min-width:1367px){
    .outBedInsduction .el-cascader .el-input{
      width:100%!important;
    }
    .outBedInsduction .box-card .card-body{
      padding: 20px;
      height:170px;
    }
  }
  .outBedInsduction .text {
    font-size: 14px;
  }
  .outBedInsduction .item {
    padding: 18px 0;
  }
  .outBedInsduction .clearfix:before,
  .outBedInsduction .clearfix:after {
    display: table;
    content: "";
  }
  .outBedInsduction .clearfix:after {
    clear: both;
  }
  .outBedInsduction .box-card {
    width: 95%;
    border: 1px solid #d1dbe5;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
    /*box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);*/
  }
  .outBedInsduction .box-card .head{
    padding: 5px 12px;
    border-bottom: 1px solid #d1dbe5;
    box-sizing: border-box;
    height:40px;
  }

  .outBedInsduction .border-warn{
    border: 1px solid #fe0000!important;
  }
  .outBedInsduction .cardWarn {
    background-color:#fe0000;
    color:#fff;
  }
  .outBedInsduction .border-OutBed{
    border: 1px solid #ffcc33!important;
  }
  .outBedInsduction .cardOutBed {
    background-color:#ffcc33;
    color:#fff;
  }
  .outBedInsduction .border-InBed{
    border: 1px solid #00cccc!important;
  }
  .outBedInsduction .cardInBed {
    background-color:#00cccc;
    color:#fff;
  }
  .outBedInsduction .border-Unavailable{
    border: 1px solid #666!important;
  }
  .outBedInsduction .cardUnavailable {
    background-color:#666666;
    color:#fff;
  }
  .outBedInsduction .el-dialog .input-item{
    margin:10px 0 15px 0;
    overflow: hidden;
    line-height:36px;
  }
  .outBedInsduction .alartRecord{
    cursor: pointer;
    display:inline-block;
    width:50px;
    height:60px;
    position:relative;
    text-align: center;
  }
  .outBedInsduction .alartRecord img{
    width:40px;
    height:40px;
  }
  .outBedInsduction .alartRecord span{
    font-size:12px;
    white-space:nowrap;
    position:absolute;
    bottom:0;
    left:0;
  }
  .outBedInsduction .openAlarm .el-dialog--tiny{
    width:30%!important;
  }
</style>
